<template>
	<view class="matchingView">
		<div class="matchingName">开始预审</div>
		<!-- 基础表单校验 -->
		<uni-forms ref="matchingForm" :rules="rules" v-model="matchingFormData">
			<view class="uni-form-item uni-column">
				<view class="title"><text class="uni-form-item__title">身份证头像面</text></view>
				<view class="uni-input-wrapper">
					<uni-file-picker limit="1" title=" " fileMediatype="image" mode="grid" file-extname="jpeg,jpg,png"
						@select="selectImg(...arguments,'file_main_person_id')"
						@delete="deleteImg(...arguments,'file_main_person_id')"></uni-file-picker>
				</view>
			</view>
			<view class="uni-form-item uni-column">
				<view class="title"><text class="uni-form-item__title">银行卡正面</text></view>
				<view class="uni-input-wrapper">
					<uni-file-picker limit="1" title=" " fileMediatype="image" mode="grid" file-extname="jpeg,jpg,png"
						@select="selectImg(...arguments,'file_main_person_id123')"
						@delete="deleteImg(...arguments,'file_main_person_id123')">
					</uni-file-picker>
				</view>
			</view>
			<uni-forms-item class="loginBottom" :label-width="labelWidth" label-align="right" label="身份证号" name="1">
				<input class="uni-input" v-model="matchingFormData.a" placeholder="请输入身份证号" />
				<span class="verifyCodeBtn" @click="">OCR识别</span>
			</uni-forms-item>
			<uni-forms-item class="loginBottom" :label-width="labelWidth" label-align="right" label="客户姓名" name="2">
				<input class="uni-input" v-model="matchingFormData.b" placeholder="请输入客户姓名" />
			</uni-forms-item>
			<uni-forms-item class="loginBottom" :label-width="labelWidth" label-align="right" label="银行卡号" name="3">
				<input class="uni-input" v-model="matchingFormData.c" placeholder="请输入银行卡号" />
				<span class="verifyCodeBtn" @click="">OCR识别</span>
			</uni-forms-item>
			<uni-forms-item class="loginBottom" :label-width="labelWidth" label-align="right" label="手机号码"
				name="mobile">
				<input class="uni-input" v-model="matchingFormData.mobile" placeholder="请输入手机号码" />
				<span class="verifyCodeBtn"
					@click="getVerifyCode()">{{countDownData ? countDownData + 's':'获取验证码'}}</span>
			</uni-forms-item>
			<uni-forms-item class="loginBottom" :label-width="labelWidth" label-align="right" label="验证码" name="5">
				<input class="uni-input" v-model="matchingFormData.e" placeholder="请输入验证码" />
			</uni-forms-item>
		</uni-forms>
		<button class="matchingSubmit" type="primary" @click="submit('matchingForm')">提交</button>
	</view>
</template>

<script>
	import {} from '@/api/matching/index.js'; //引入需要的api

	import {
		fileToBase64,
		appfileToBase64
	} from '@/common/util.js'

	export default {
		data() {
			return {
				labelWidth: 110,
				// 校验表单数据
				matchingFormData: {
					"api_key": getApp().globalData.api_key,
					"mobile": '',
				},
				countDownData: 0,
				// 校验规则
				rules: {}
			}
		},
		methods: {
			// 获取上传图片file
			selectImg(e, type) {

				let _this = this
				e.tempFiles.forEach((item, index) => {
					// #ifdef H5|MP-WEIXIN
					fileToBase64(item.file, function(dataurl) {
						_this.imgToBase[type].push({
							'uuid': item.uuid,
							'extname': item.extname,
							'base64': dataurl.replace(
								`data:image/${item.extname=="png"?"png":"jpeg"};base64,`,
								"")
						})
					})
					// #endif
					// #ifdef APP|APP-PLUS
					appfileToBase64(e.tempFilePaths[index], function(dataurl) {
						_this.imgToBase[type].push({
							'uuid': item.uuid,
							'extname': item.extname,
							'base64': dataurl.replace(
								`data:image/${item.extname=="png"?"png":"jpeg"};base64,`,
								"")
						})
					})
					// #endif
				})
				this.img[type] = this.img[type].concat(e.tempFiles)
			},
			// 删除图片
			deleteImg(e, type) {
				this.img[type] = this.img[type].filter(item => e.tempFile.uuid != item.uuid)
				this.imgToBase[type] = this.imgToBase[type].filter(item => e.tempFile.uuid != item.uuid)
			},
			// 校验图片
			validImg() {},
			// 处理图片数据
			handleImgData() {},
			// 倒计时函数
			countDown() {
				let _this = this
				_this.countDownData = 60
				let timer = setInterval(function() {
					_this.countDownData--;
					if (_this.countDownData == 0) {
						clearInterval(timer);
					}
				}, 1000);
			},
			// 获取验证码
			getVerifyCode() {
				if (this.countDownData) {
					return uni.showModal({
						content: `请在${this.countDownData}秒后重试`,
						showCancel: false
					})
				}
				if (!/^1\d{10}$/.test(this.matchingFormData.mobile)) {
					return uni.showModal({
						content: '手机号码填写错误',
						showCancel: false
					})
				}
				this.countDown()
				let obj = {
					mobile: this.matchingFormData.mobile,
					api_key: getApp().globalData.api_key
				}
				// 获取短信验证码
				this.carMarketRegVerifyCodeApi(obj)
			},
			// 表单提交
			submit(ref) {
				// let _this = this
				// // 校验图片的完整性
				// if (!this.validImg()) {
				// 	return uni.showModal({
				// 		content: "图片未上传完整",
				// 		showCancel: false
				// 	})
				// }
				// // 图片数据转base64
				// this.handleImgData()

				// // 校验表单完整性
				// this.$refs[ref].validate().then(res => {
				// 	_this.carMarketRegSubmitApi({
				// 		..._this.matchingFormData,
				// 		..._this.imgData,

				// 	})
				// }).catch(err => {
				// 	console.log(err)
				// 	uni.showModal({
				// 		content: "请填写完整再次提交！",
				// 		showCancel: false
				// 	})
				// })
			},

			// 获取短信验证码
			carMarketRegVerifyCodeApi(data) {
				uni.showToast({
					title: '发送成功'
				});
				carMarketRegVerifyCode(data).then(res => {}).catch(err => console.log(err));
			},
			// 获取注册图片url
			carMarketRegFileUrlApi(data) {
				carMarketRegFileUrl(data).then(res => {
					console.log(res);
				}).catch(err => console.log(err));
			},
			// 提交注册
			carMarketRegSubmitApi(data) {
				carMarketRegSubmit(data).then(res => {
					uni.showModal({
						title: '提交成功',
						content: '审核通过后，会以短信形式通知您，注意查收！',
						btn: ["知道了"],
						success: function(res) {
							uni.navigateTo({
								url: '../'
							})
						}
					});
				}).catch(err => console.log(err));
			}
		}
	}
</script>

<style scoped>
	.matchingName {
		font-size: 50upx;
		margin:30upx 20upx;
	}
	
	.required ::before {
		content: "*";
		color: red;
	}

	.matchingView>>>.uni-forms-item__label .label-text {
		color: #000000;
		font-size: 16px;
	}
	
	.matchingView>>>.uni-form-item__title {
		color: #555555;
		font-size: 16px;
	}


	.matchingView>>>.uni-forms-item__inner {
		padding-bottom: 4px;
	}

	.matchingView {
		padding: 20rpx;
	}

	.verifyCodeBtn {
		position: absolute;
		right: 0;
		top: 10px;
		cursor: pointer;
		color: #007AFF;
	}

	.loginBottom {
		border-bottom: 1px solid #ddd;
	}

	.matchingSubmit {
		margin: 40upx;
	}
</style>
